<template>
  <div>
    <el-dialog
      width="800px"
      :title="$t('新增')"
      destroy-on-close
      append-to-body
      :visible.sync="show"
      :before-close="cancel"
    >
      <el-form ref="elForm" :model="form" :rules="rules" size="small" label-width="100px">
        <el-form-item :label="$t('测试名称')" prop="combinationName">
          <el-input v-model="form.combinationName" />
        </el-form-item>
        <el-form-item :label="$t('sku')" prop="children">
          <el-button type="primary" @click="skuList.show = true" size="mini">{{ $t('追加') }}</el-button>
          <input type="checkbox" v-model="form.children" style="opacity: 0" />
        </el-form-item>
      </el-form>
      <el-table :data="form.children" ref="skuListRef">
        <el-table-column type="selection" width="55" align="center" />
        <!-- sku -->
        <el-table-column align="center" show-overflow-tooltip prop="skuNo" :label="$t('sku编号')" />

        <!-- 图片 -->
        <el-table-column prop="imgUrl" :label="$t('图片')" align="center" width="100">
          <template slot-scope="scope">
            <el-image
              fit="contain"
              :key="Math.random()"
              v-hover="scope.row.imgUrl"
              style="width: 50px; height: 50px"
              :src="scope.row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
            />
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="skuNameCn" :label="$t('中文名')" align="center" width="150" />
        <el-table-column show-overflow-tooltip prop="skuNameJp" :label="$t('日文名')" align="center" width="150" />

        <!-- 组合数量 -->
        <el-table-column prop="combinationNum" :label="$t('组合数量')" width="120" align="center" />

        <el-table-column :label="$t('操作')">
          <template slot-scope="{ row }">
            <el-popconfirm @confirm="handleDelete(row)" :title="$t('确认删除?')">
              <el-button style="color: red" type="text" slot="reference">{{ $t('删除') }}</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">{{ $t('取消') }}</el-button>
        <el-button type="primary" @click="handleAdd">
          {{ $t('确定') }}
        </el-button>
      </div>
    </el-dialog>
    <SkuList :show.sync="skuList.show" @select="handleSelect" :formData="skuList.formData" :type="skuList.type" />
  </div>
</template>

<script>
import { distributorShopCombinationTestPackageAdd } from '@/api/orderManage/distributorShopCombinationTestPackage'
import { getCesNo } from '@/api/distribution/sku/skuConsumablePurchase'
import SkuList from './skuList.vue'

export default {
  components: {
    SkuList,
  },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: {},
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      skuList: {
        show: false,
        type: '',
        formData: {},
      },
      form: {
        // /**耗材编号 */
        // cesNo: '',
        // num: '',
        // priceTotal: '',
        // priceUnit: '',
        // cesTotalAmount: '',
        // cesUnitPrice: '',
        // purchaseRemark: '',
        // refundNum: '',
        // refundPrice: '',
        // refundPriceUnit: '',
        // refundReason: '',
        // receiveNum: '',
        // purchaseLink: '',
        // remark: '',
      },
      // 表单校验
      rules: {
        id: [{ required: true, message: 'ID不能为空', trigger: 'blur' }],
        cesNo: [{ required: true, message: '耗材编号不能为空', trigger: 'blur' }],
        cesName: [{ required: true, message: '耗材名称不能为空', trigger: 'blur' }],
        specification: [{ required: true, message: '耗材规格型号不能为空', trigger: 'blur' }],
        cesImg: [{ required: true, message: '耗材图片不能为空', trigger: 'blur' }],
        cesPositionNo: [{ required: true, message: '耗材库位号不能为空', trigger: 'blur' }],
        cesType: [
          {
            required: true,
            message: '耗材类型 1-商品耗材 2-订单捆包耗材不能为空',
            trigger: 'change',
          },
        ],
        num: [{ required: true, message: '数量不能为空', trigger: 'blur' }],
        price: [{ required: true, message: '价格不能为空', trigger: 'blur' }],
        priceUnit: [
          {
            required: true,
            message: '价格单位 1-RMB 2-JPY 3-USD不能为空',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.resetForm()
        getCesNo().then((res) => {
          const { code, msg } = res
          if (code === 200) {
            this.form.cesNo = msg
          }
        })
      }
    },
  },
  methods: {
    handleDelete(row) {
      const index = this.form.children.findIndex((i) => i.id == row.id)
      this.form.children.splice(index, 1)
    },
    handleSelect(row) {
      // 判断数据是否存在
      const index = this.form.children.findIndex((i) => i.id == row.id)
      if (index < 0) {
        this.form.children.push(row)
      } else {
        this.form.children[index].combinationNum += row.combinationNum
      }
      this.$message({ type: 'success', message: this.$t('操作成功') })
    },
    handleAdd() {
      this.$refs.elForm.validate((valid) => {
        if (valid) {
          const data = JSON.parse(JSON.stringify(this.form))
          data.children.forEach((i) => {
            i.skuId = i.id
            i.id = null
          })
          distributorShopCombinationTestPackageAdd(data).then((res) => {
            if (res.code == 200) {
              this.$message({ type: 'success', message: res.msg })

              this.showDialog = false
              this.$emit('getList')
              this.cancel()
            }
          })
        }
      })
    },
    resetForm() {
      Object.keys(this.form).forEach((key) => (this.form[key] = ''))
      this.form.children = []
    },

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
